import { useState, useRef } from "react";
import { Button } from "antd";
import { QueryPage } from "@components";
import { fields, GetColumns, GetModalFields } from "./config";
import { PlusOutlined } from "@ant-design/icons";
import { findCfgUnitProducts, editCfgUnitProducts } from "@apis/untiConfigApi";
import { useMainContext } from '@contexts/MainContext'

const UntiConfig = () => {
  const { getCode, isButtomShow } = useMainContext()

  const queryFormRef = useRef("queryFormRef");
  const formProps = {
    formRef: queryFormRef,
    fields: fields,
    initialValues: {
      status: '1',
    },
    extraTail: (
      <>
        {isButtomShow('430402') && <Button icon={<PlusOutlined />} onClick={() => {
          setIsDisabled(false)
          modalRef.current.showModal()
        }}>
          新增
        </Button>}
      </>
    ),
  };
  
  //编辑
  const edit = (row) => {
    setIsDisabled(true)
    modalRef.current.showModal(row);
    
    const { productCodeList } = row
    const allRisks = getCode('allRisks').options
    const newValue = productCodeList?.length === allRisks?.length ? ['all'] : productCodeList
    setTimeout(() => {
      modalFormRef.current?.setFieldValue('untrueProductCodeList', newValue)
    }, 0);
  };

  /** 定义表格属性 */
  const tableProps = {
    rowKey: "cfgProId",
    columns: GetColumns( edit ),
  };

  const [isDisabled, setIsDisabled] = useState(false)
  const modalRef = useRef("modalRef");
  const modalFormRef = useRef("modalFormRef");
  const modalFormProps = {
    formRef: modalFormRef,
    fields: GetModalFields(modalFormRef, isDisabled),
    initialValues: {
      status: '1',
    },
  };

  return (
    <QueryPage
      formProps={formProps}
      tableProps={tableProps}
      queryApi={findCfgUnitProducts}
      modalRef={modalRef}
      modalFormProps={modalFormProps}
      addApi={editCfgUnitProducts}
      updataId="cfgProId"
      updataApi={editCfgUnitProducts}
    />
  );
};

export default UntiConfig;
